<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件分支演示项目</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
    </style>
</head>
<body class="flex items-center justify-center">
    <div class="card w-96 bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-center">
                <i class="fas fa-code-branch text-primary"></i>
                条件分支演示
            </h2>
            
            <div class="form-control">
                <label class="label">
                    <span class="label-text">请输入内容：</span>
                </label>
                <input type="text" id="userInput" placeholder="在此输入任意内容..." 
                       class="input input-bordered w-full" />
            </div>

            <button class="btn btn-primary w-full" onclick="checkInput()">
                <i class="fas fa-check"></i>
                检查输入
            </button>

            <div id="result" class="alert hidden mt-4">
                <span id="resultText"></span>
            </div>
        </div>
    </div>

    <script>
        async function checkInput() {
            const input = document.getElementById('userInput').value;
            const resultDiv = document.getElementById('result');
            const resultText = document.getElementById('resultText');

            try {
                const response = await fetch('http://localhost:5000/api/check', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({ text: input })
                });

                const data = await response.json();
                
                // 根据返回类型设置不同的样式
                resultDiv.className = 'alert mt-4';
                if (data.type === 'error') {
                    resultDiv.classList.add('alert-error');
                } else if (data.type === 'number') {
                    resultDiv.classList.add('alert-success');
                } else {
                    resultDiv.classList.add('alert-info');
                }
                
                resultText.textContent = data.message;
                resultDiv.classList.remove('hidden');
                
            } catch (error) {
                resultDiv.className = '